
<template lang="html">
  <div class="all">
    <div class="all_div">
     <p>ONE  IS  ALL</p>
     <span class="icon-tian2" @click="jump('weather')"></span>
    </div>

    <Lunbo></Lunbo>
    <div class="all_wrap">
      <p>分类导航</p>
      <ul>
        <li @click="change('hp')"><img src="../../static/img/tw.jpg"/><span>图文</span></li>
        <li @click="change('essay')"><img src="../../static/img/yd.jpg"/><span>阅读</span></li>
        <li @click="change('serialcontent')"><img src="../../static/img/lz.jpg"/><span>连载</span></li>
        <li @click="change('question')"><img src="../../static/img/wd.jpg"/><span>问答</span></li>
        <li @click="change('music')"><img src="../../static/img/yy.jpg"/><span>音乐</span></li>
      </ul>
    </div>
    <div class="content">
      <div class="con_div" v-for=" item in content">
        <img :src="item.cover" alt="">
        <p>{{ item.title }}</p>
      </div>
    </div>
 <Navb></Navb>
 </div>

</template>

<script>
import Navb from './navbar'
import axios from 'axios';
import Lunbo from '../components/lunbo'
export default {
  data(){
    return{
      content:'',
      msg: 'vue-amap向你问好！'
    }
  },
  methods:{
    change(item){
      this.$router.push({
        path:'/allDetials/'+item
      })
    },
    jump(data){
      this.$router.push({
        path:'/components/' + data
      })
    }
  },
  components:{
    Lunbo,
    Navb

  },
  created(){
    axios.get('../../static/allcon.json').then((response)=>{
      this.content = response.data.data;
    })
  }

}
</script>

<style lang="css" scoped>
*{
  padding: 0;
  margin:0;
  /*font-family: '楷体'*/
}
.all{

  color: black;
}
.all_div{
  width:100%;
  z-index: 100;
  height: 4rem;
  position: fixed;
  background: #fff;
}
.all_div>p{
  height: 4rem;
  line-height: 4rem;
  font-size: 3rem;
  display: inline-block;
  font-weight: bold;
  margin:0 0 0 2rem;
}
.icon-tian2:before{
  content: "\e90f";
  display: inline-block;
  font-size: 3rem;
  height: 2.7rem;
  float: right;
  padding:1.3rem 1.5rem 0 0;
}
.all_wrap{
  width: 90%;
  margin: 0 auto;
}
.all_wrap>p{
  text-align: left;
  margin-bottom: 1rem;
  font-size:1.5rem;
}
.all_wrap>ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.all_wrap>ul>li{
  width: 30%;
  height:8rem;
  margin-bottom: 1rem;
  position: relative;
}
.all_wrap>ul>li>img{
  width: 100%;
  height: 100%;
}
.all_wrap>ul>li>span{
  position: absolute;
  bottom: 0.5rem;
  right:  33%;
  color: #fff;
  /*font-family: '圆体';*/
  font-size: 1.6rem;
}
.all_wrap>ul>li:nth-of-type(2){
  width: 65%;
}

.con_div{
  width: 100%;
  /*background-color: greenyellow;*/
  border-top: 1rem solid #f1f1f1;
}
.con_div>img{
  width: 90%;
  margin: 1.5rem auto;
}
.con_div>p{
  width: 90%;
  text-align: left;
  margin: 0rem auto;
  margin-bottom: 1.5rem;
  font-size: 1.7rem;
  line-height: 2rem;
}
.con_div:nth-of-type(10){
  margin-bottom: 4rem;
}

</style>
